<template>
  <div class="edit-container">
    <el-steps :active="currentStep-1" finish-status="success" class="step-container">
      <el-step v-for="item in stepList" :key="item" :title="item"></el-step>
    </el-steps>
    <my-form v-show="currentStep===1" form-class="form-company" :model="companyInfo" :form-items="formItems.step1" ref="formStep1" :label-width="labelWidth"></my-form>
    <my-form v-show="currentStep===2" form-class="form-company" :model="companyInfo" :form-items="formItems.step2" ref="formStep2" :label-width="labelWidth"></my-form>
    <my-form v-show="currentStep===3" form-class="form-company" :model="companyInfo" :form-items="formItems.step3" ref="formStep3" :label-width="labelWidth"></my-form>
    <my-form v-show="currentStep===4" form-class="form-company" :model="companyInfo" :form-items="formItems.step4" ref="formStep4" :label-width="labelWidth"></my-form>
    <div class="btn-container" :style="`margin-left:${labelWidth}`">
      <el-button v-if="currentStep>1" @click="prevStep">上一步</el-button>
      <el-button type="primary" @click="nextStep">{{currentStep>=stepList.length?"提交":"下一步"}}</el-button>
      <el-button type="info" @click="cancelEdit">取消编辑</el-button>
    </div>
  </div>

</template>

<script>
  const formItems = {
      step1:[
        // 法定代表人
        {
          name: 'name',
          label:'法定代表人',
          type:'text',
          rule:{required: true, message: '请输入企业法人', trigger:'blur'}
        },
        // 身份证（正反面）
        // 成立日期
        {
          name: 'establishDate',
          label:'成立日期',
          placeholder:'成立日期',
          type:'date',
//          rule:{type: 'date', required: true, message: '请选择成立日期', trigger:'change'},
        },
        // 营业年限
        {
          name: 'owereExperience',
          label:'营业年限',
          type:'select',
          data: selectDatas.CompanyAgeList,
          rule:{required: true, message: '请选择营业年限', trigger:'change'},
        },
        // 营业期限（起止日期）
        {
          name1: 'TestDateRange1',
          name2: 'TestDateRange2',
          label:'日期范围',
          placeholder1:'日期起始',
          placeholder2:'日期结束',
          type:'dateRange',
//          rule1:{type: 'date', required: true, message: '选日期1', trigger:'change'},
//          rule2:{type: 'date', required: true, message: '选日期2', trigger:'change'},
        },
        // 注册资金（int）
        {
          name:'capital',
          label:'注册资金',
          type:'number',
          rule:{required: true, message:'请输入注册资金', trigger:'blur'},
        },
        // 经营范围
        {
          name: 'scope',
          label:'经营范围',
          type:'text',
          rule:{required: true, message: '请输入经营范围', trigger:'blur'}
        },
        // 营业执照（副本照片）
        // 公司网址（非必填）
        {
          name: 'homepage',
          label:'公司网址',
          type:'text',
        },
//        {
//          name:'testPic',
//          label:'單图片上傳',
//          type:'singleImage',
//          maxFileSize:1,
//          rule: {required:true, message:'请选择图片'}
//        },
//        {
//          name:'testFile',
//          label:'單文件上傳',
//          type:'singleFile',
//          fileTypeList:['txt'],
//          rule: {required:true, message:'请选择文件'}
//        }
      ],
    step2:[
      // 职工人数，50以下/50-90/100人以上
      {
        name: 'employNum',
        label:'职工人数',
        type:'select',
        data: selectDatas.CompanyPeopleCounts,
        rule:{required: true, message: '请选择职工人数', trigger:'change'},
      },
      // 资产总额，1000万以下、1000-3000万、3000-5000万、5000万以上
      {
        name: 'totalCapital',
        label:'资产总额',
        type:'select',
        data: selectDatas.CompanyTotalMoney,
        rule:{required: true, message: '请选择资产总额', trigger:'change'},
      },
    ],
    step3:[
      // 传真
      {
        name: 'fax',
        label:'企业传真',
        type:'text'
      },
      // 通讯地址
      {
        name: 'officeAddr',
        label:'办公室地址',
        type:'text',
        rule:{required: true, message: '请输入通讯地址', trigger:'blur'},
      },
    ],
    step4:[
      // 实际控制人姓名
      {
        name: 'owerName',
        label:'实际控制人姓名',
        type:'text',
        rule:{required: true, message: '请输入实际控制人姓名', trigger:'blur'},
      },
      // 年龄（数值）
      {
        name: 'owerAge',
        label:'年龄',
        type:'number',
        rule:{type:'number',required: true, min:1, message:'请输入大于0的数值'},
      },
      // 健康状况（文件）
      // 身份证（正反两面)
      // 从业时间
      {
        name: 'owerTime',
        label:'从业时间',
        type:'text',
        rule:{required: true, message: '请输入从业时间', trigger:'blur'},
      },
      // 行业经验（1年以内、1-3年、3-5年、5-10年、10年以上)
      {
        name: 'owerExperience',
        label:'行业经验年限',
        type:'select',
        data: selectDatas.CompanyAgeList,
        rule:{required: true, message: '请选择行业经验年限', trigger:'change'},
      },
      // 从业经历（300字以内）
      {
        name: 'owerCv',
        label:'从业经历',
        type:'area',
        rule:{required: true, message: '请填入从业经历', trigger:'blur'},
      },
      // 简历
    ],
    };

  import * as selectDatas from '../../../constants/select-datas';
  import MyForm from '../../../components/MyForm'
    export default {
      name: 'CompanyEdit',
      props:{
        companyInfo:{
          type: Object,
          required: true,
        },
      },
      components:{
        MyForm
      },
      data() {
          return {
            formItems: formItems,
            labelWidth: "180px",

            currentStep: 1,
            stepList:[
              '企业基本信息',
              '企业运营信息',
              '企业联系人信息',
              '控制人基本信息',
            ],
          }
        },
      methods:{
        initStep(){
          this.currentStep=1;
        },
        prevStep(){
          this.currentStep--;
        },
        nextStep(){
          let me = this;
          this.$refs[`formStep${this.currentStep}`].validate((valid)=>{
            if(valid){
              if(me.currentStep===me.stepList.length){
                let targetObj = {};
                for(let i=1;i<=me.stepList.length;i++){
                  let subFormData = me.$refs[`formStep${i}`].nowModel;
                  targetObj={...targetObj, ...subFormData};
                }
                me.$emit("submitEdit", targetObj);
                me.currentStep=1;
                return;
              }
              this.currentStep++;
            }
          })
        },
        cancelEdit(){
          this.$emit("cancelEdit");
        }
      },
    }
</script>

<style lang="stylus" scoped>
  .edit-container
    .step-container
      max-width: 1000px
    .form-company
      width: 600px
      margin-top: 15px
</style>
